<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="房屋名称：" name="房屋号">
					<view>{{roomName}}</view>
				</uni-forms-item>
				<!-- <uni-forms-item required label="房屋号：" name="房屋号">
					<input maxlength="18" v-model="params['房屋号']" placeholder="请输入房屋号" @input="binddata('房屋号',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房屋号：" name="房屋号">
					<input maxlength="18" v-model="params['房屋号']" placeholder="请输入房屋号" @input="binddata('房屋号',$event.detail.value)">
				</uni-forms-item> -->
				<uni-forms-item required label="房屋类型：" name="房屋类型">
					<view :class="label3 == '请选择房屋类型' ? 'color':''" class="tap" @click="handleTap('picker3')">{{label3}}</view>
					<lb-picker ref="picker3" @click="handleTap('picker3')" @input="binddata('房屋类型',$event)" v-model="value2" mode="selector"
					 :list="roomTypeList" :dataset="{ name: 'label3' }" @confirm="handleConfirm3" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="证件类型：" name="证件类型">
					<view :class="label4 == '请选择证件类型' ? 'color':''" class="tap" @click="handleTap('picker4')">{{label4}}</view>
					<lb-picker ref="picker4" @click="handleTap('picker4')" v-model="value3" mode="selector"
					 :list="cardTypeList" :dataset="{ name: 'label4' }" @confirm="handleConfirm4" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="证件编号：" name="证件编号">
					<input maxlength="18" v-model="params['证件编号']" placeholder="请输入证件编号">
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item label="房屋面积：" name="房屋面积">
					<input maxlength="50" v-model="params['房屋面积']" placeholder="请填写房屋面积">
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['消防重点关注对象']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item required label="房屋面积：" name="房屋面积">
					<input maxlength="50" v-model="params['居住出租房屋']['可居住房间数']" placeholder="请输入房屋面积" @input="binddata('carNo',$event.detail.value)">
				</uni-forms-item> -->
				<uni-forms-item v-show="params['房屋类型'] === 2" required name="是否分隔" label="是否有改变原有结构的隔断：">
					<uni-data-checkbox v-model="params['出租房参数']['是否分隔']" :localdata="divideStatus"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required v-show="params['房屋类型'] === 2" label="可居住房间数：" name="可居住房间数">
					<input maxlength="50" v-model="params['出租房参数']['可居住房间数']" placeholder="请输入可居住房间数">
				</uni-forms-item>
				<uni-forms-item v-show="params['房屋类型'] === 2" required label="人均房屋面积：" name="平均房屋面积">
					<input type="number" maxlength="50" v-model="params['出租房参数']['平均房屋面积']" placeholder="请输入人均房屋面积" @input="binddata('carNo',$event.detail.value)">
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item label="备注信息：" name="备注">
					<input maxlength="50" placeholder="请填写备注信息" v-model="params['备注']">
				</uni-forms-item>
				<uni-forms-item>
					<facility-info :hydrantList="hydrantList" 
					:annihilatorList="annihilatorList"
					:smokeList="smokeList"
					:gasTankList="gasTankList" 
					:temperateList="temperateList"
					:hydrantLength="hydrantLength"
					:annihilatorLength="annihilatorLength"
					:smokeLength="smokeLength"
					:gasTankLength="gasTankLength" 
					:temperateLength="temperateLength" :isShowMore="false"
					:isShowAdd="!isNoEdit" :isShowDelete="!isNoEdit"
					@edit="goEdit" @delete="onDelete" @add="goAddInstall"></facility-info>
				</uni-forms-item>
				<uni-forms-item v-if="personType == 1 && !isMyRoom">
					<hide-info  :residentList="params['住户列表']"></hide-info>
				</uni-forms-item>
				<uni-forms-item v-else>
					<resident-info :originId="params['房屋检查点id']" @delete="onDeleteResident" :residentList="params['住户列表']" @add="goAddResident"></resident-info>
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import FacilityInfo from '../components/facilityInfo.vue'
	import ResidentInfo from '../components/residentInfo.vue'
	import HideInfo from '../components/hideInfo'
	import {
		showModal
	} from '@/utils/common.js'
	import { mapState } from 'vuex'
	export default {
		components: {
			HideInfo,
			uploader,
			DatePicker,
			LbPicker,
			FacilityInfo,
			ResidentInfo
		},
		data() {
			return {
				isNoEdit: false,
				checkName: null,
				hydrantList: [],
				hydrantLength: 0,
				annihilatorList: [],
				annihilatorLength: 0,
				smokeList: [],
				smokeLength: 0,
				temperateList: [],
				temperateLength: 0,
				gasTankList: [],
				gasTankLength: 0,
				checkId: null,
				roomId: null,
				label: '请选择所属分区',
				label1: '请选择所属楼栋',
				label2: '请选择所属单元',
				label3: '请选择房屋类型',
				label4: '请选择证件类型',
				value: '',
				value1: '',
				value2: '',
				value3: '',
				roomName: '',
				installList: [],
				installTypeList: this.$type.installTypeList,
				params: {
					网格id: null,
					检查点id: null,
					所属楼栋id: null,
					所属单元id: null,
					房屋号: '',
					房屋类型: null,
					房屋面积: null,
					证件类型: null,
					证件编号: null,
					备注: null,
					是否分隔: null,
					照片上传: null,
					消防重点关注对象: null,
					住户列表: [],
					出租房参数: {
						是否分隔: null,
						可居住房间数: null,
						平均房屋面积: null
					}
				},
				params1: {
					网格id: null,
					检查点id: null
				},
				params2: {
					网格id: null,
					检查点id: null,
					分区id: null
				},
				params3: {
					网格id: null,
					检查点id: null,
					楼栋id: null
				},
				params4: {
					房屋id: null
				},
				params5: {
					房屋id: null,
					检查点id: null
				},
				params6: {
					房屋号id: null
				},
				params7: {
					id: null
				},
				cardTypeList: [{
					id: '1',
					value: '房产证',
					label: '房产证'
				}, {
					id: '2',
					value: '土地使用证',
					label: '土地使用证'
				}],
				roomTypeList: this.$type.roomTypeList,
				status: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				divideStatus: [{
						text: '是',
						value: '1'
					},
					{
						text: '否',
						value: '2'
					}
				],
				partitionList: [],
				unitList: [],
				buildList: [],
				typeList: ['自住房', '出租房', '空置房', '待查房', '教室', '办公室', '厂房', '机房', '仓库', '病房', '手术室', '宿舍', '其他'],
				typeObj: {
					1: '房产证',
					2: '土地使用证'
				},
				roomTypeObj: {
					自住房: 1,
					出租房: 2,
					空置房: 3,
					待查房: 4,
					教室: 5,
					办公室: 6,
					厂房: 7,
					机房: 8,
					仓库: 9,
					病房: 10,
					手术室: 11,
					宿舍: 12,
					其他: 13
				},
				cardTypeObj: {
					'房产证': 1,
					'土地使用证': 2
				},
				//表单验证规则
				rules: {
					所属楼栋id: {
						rules: [{
							required: true,
							errorMessage: '请选择所属楼栋',
						}]
					},
					房屋号: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋号',
						}]
					},
					房屋类型: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋性质',
						}]
					},
					// 证件类型: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写证件类型',
					// 	}]
					// },
					// 证件编号: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写证件编号',
					// 	}]
					// },
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点关注对象',
						}, ]
					},
					房屋面积: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋面积',
						}]
					}
					// 平均房屋面积: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			if (this.params.房屋类型 !== 2 || this.params.出租房参数.平均房屋面积) {									
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请填写人均房屋面积')
					// 			}
					// 		}
					// 	}]
					// },
					// 是否分隔: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			if (this.params.房屋类型 !== 2 || this.params.出租房参数.是否分隔) {									
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请选择是否分隔房间')
					// 			}
					// 		}
					// 	}]
					// }
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.checkName = options.checkName
			console.log(options)
			// this.params1.检查点id = +options.id
			this.params1.网格id = uni.getStorageSync('gridInfo').所属网格id
			this.params4.房屋id = +options.id
			this.params7.id = +options.id
			this.roomId = +options.id
			this.params6.房屋号id = +options.id
			this.checkId = +options.checkId
			this.params5.检查点id = +options.checkId
			// if(options.isRoom) {
			// 	this.getPointInfo()
			// 	return
			// }
			// this.getRoomInfo()
			// this.getPointInfo()
		},
		onShow() {
			this.getRoomInfo()
			this.getInstallList()
		},
		computed: {
			...mapState(['personType']),
			isMyRoom() {
				let roomIds = uni.getStorageSync('userInfo').房屋 ? uni.getStorageSync('gridInfo').房屋.map(item => item['房屋id']) : []
				return roomIds.includes(this.roomId)
			}
		},
		methods: {
			goAddInstall() {
				uni.navigateTo({
					url: '../createInstallation/createInstallation?id=' + this.params.所属检查点id + '&roomId=' + this.params4.房屋id + '&name=' + this.checkName
				})
			},
			goEdit(id) {
				uni.navigateTo({
					url: '../installtionDetail/installtionDetail?id=' + id + '&roomId=' + this.params4.房屋id
				})
			},
			onDelete(id) {
				this.$common.showModal('确定要删除该设施吗', this.deleteInstall, [id])
			},
			deleteInstall(id) {
				this.$http.post('gridSystem/device/delete', {
					id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getInstallList()
					}
				})
			},
			getInstallList() {
				this.$http.post('gridSystem/device/listWithoutAuth', this.params6).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.installList = res.data.list
						if(res.data.list !== null) {
							this.hydrantList = res.data.list.filter(item => item.设施类型 === 'hydrant')
							this.annihilatorList = res.data.list.filter(item => item.设施类型 === 'annihilator')
							this.smokeList = res.data.list.filter(item => item.设施类型 === 'smokeDetector')
							this.temperateList = res.data.list.filter(item => item.设施类型 === 'temperatureDetector')
							this.gasTankList = res.data.list.filter(item => item.设施类型 === 'gasTank')
							this.hydrantLength = res.data.list.filter(item => item.设施类型 === 'hydrant').length
							this.annihilatorLength = res.data.list.filter(item => item.设施类型 === 'annihilator').length
							this.smokeLength = res.data.list.filter(item => item.设施类型 === 'smokeDetector').length
							this.temperateLength = res.data.list.filter(item => item.设施类型 === 'temperatureDetector').length
							this.gasTankLength = res.data.list.filter(item => item.设施类型 === 'gasTank').length
						    return 
						}
							this.hydrantList = []
							this.annihilatorList = []
							this.smokeList = []
							this.temperateList = []
							this.gasTankList = []
							this.hydrantLength = 0
							this.annihilatorLength = 0
							this.smokeLength = 0
							this.temperateLength = 0
							this.gasTankLength = 0
						
					}
				})
			},
			onDeleteResident(id) {
				this.$common.showModal('确定要删除该住户吗', this.deleteResident, [id])
			},
			deleteResident(id) {
				console.log(id)
				this.$http.post('gridSystem/resident/delete', {
					住户id: id
				}).then(res => {
					if (res.code === 10000) {
						uni.showToast({
							title: '删除成功'
						})
						this.getRoomInfo()
					}
				})
			},
			goAddResident() {
				uni.navigateTo({
					url: '../addResident/addResident?roomId=' + this.params4.房屋id + '&checkId=' + this.params.所属检查点id + '&originId=' + this.params.房屋检查点id
				})
			},
			// goAddInstall() {
			// 	uni.navigateTo({
			// 		url: '../createInstallation/createInstallation?roomId=' + this.params.房屋id
			// 	})
			// },
			// async getPointInfo() {
			// 	const res = await this.$http.post('gridSystem/checkPoint/info', this.params7)
			// 	this.params4.房屋id = res.data.房屋.房屋id
			// 	const res1 = await this.$http.post('gridSystem/room/info', this.params4)
			// 	if (res1.code === 10000) {
			// 		if (!res1.data.出租房参数) {
			// 			res1.data.出租房参数 = {
			// 				是否分隔: null,
			// 				可居住房间数: null,
			// 				平均房屋面积: null
			// 			}
			// 		}
			// 		this.params = res1.data
			// 		// this.label1 = res.data.楼栋号
			// 		// this.label2 = res.data.单元号
			// 		this.label3 = this.typeList[res1.data.房屋类型 - 1]
			// 		this.label4 = this.typeObj[res1.data.证件类型]
			// 		if (res1.data.分区号 !== '' && !res1.data.分区号.includes('区')) {
			// 			res1.data.分区号 = res1.data.分区号 + '区'
			// 		}
			// 		if (!res1.data.楼栋号.includes('栋')) {
			// 			res1.data.楼栋号 = res1.data.楼栋号 + '栋'
			// 		}
			// 		if (res1.data.单元号 !== '' && !res1.data.单元号.includes('单元')) {
			// 			res1.data.单元号 = res1.data.单元号 + '单元'
			// 		}
			// 		this.roomName = res1.data.分区号 + res1.data.楼栋号 + res1.data.单元号 + res1.data.房屋号
			// 	}
			// },
			getRoomInfo() {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/room/info', this.params4).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if (!res.data.出租房参数) {
							res.data.出租房参数 = {
								是否分隔: null,
								可居住房间数: null,
								平均房屋面积: null
							}
						}
						this.params = res.data
						if(!res.data.户主 && this.personType == 1) {
							this.isNoEdit = true
						}
						if(this.personType == 1 && (res.data.户主 && res.data.户主.手机号 !== uni.getStorageSync('gridInfo').手机号)) {
							this.isNoEdit = true
						}
						if(this.personType == 1) {
							this.status.forEach(item => {
								if (item.value !== res.data.消防重点关注对象) {
									item.disable = true
								}
							})
						}
						// this.label1 = res.data.楼栋号
						// this.label2 = res.data.单元号
						this.label3 = this.typeList[res.data.房屋类型 - 1]
						this.label4 = this.typeObj[res.data.证件类型]
						if (res.data.分区号 !== '' && !res.data.分区号.includes('区')) {
							res.data.分区号 = res.data.分区号 + '区'
						}
						if (!res.data.楼栋号.includes('栋')) {
							res.data.楼栋号 = res.data.楼栋号 + '栋'
						}
						if (res.data.单元号 !== '' && !res.data.单元号.includes('单元')) {
							res.data.单元号 = res.data.单元号 + '单元'
						}
						this.roomName = res.data.分区号 + res.data.楼栋号 + res.data.单元号 + res.data.房屋号
					}
				})
			},
			getPartitionList() {
				this.$http.post('gridSystem/partition/list', this.params1).then(res => {
					console.log(res)
				})
			},
			getBuildList() {
				this.$http.post('gridSystem/building/list', this.params2).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if (res.data.list !== null) {
							this.$common.transformBuild(res.data.list)
						}
						this.buildList = res.data.list
					}
				})
			},
			getUnitList() {
				this.$http.post('gridSystem/unit/list', this.params3).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								if (!item.单元号.includes('单元')) {
									item.单元号 = item.单元号 + '单元'
								}
								item.value = item.单元号
								item.label = item.单元号
							})
						}
						this.unitList = res.data.list
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			// 楼栋
			handleConfirm1(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params3.楼栋id = e.item.楼栋id
					this.params.所属楼栋id = e.item.楼栋id
					this.getUnitList()
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 单元
			handleConfirm2(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.所属单元id = e.item.单元id
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 房屋类型
			handleConfirm3(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.房屋类型 = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 证件类型
			handleConfirm4(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.证件类型 = e.item.id
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log(this.params['出租房参数'])
					if (this.params.房屋类型 === 2 && !this.params.出租房参数.是否分隔) {
						uni.showToast({
							title: '请填写是否有改变原有结构的隔断',
							icon: 'none'
						})
						return
					}
					if (this.params.房屋类型 === 2 && !this.params.出租房参数.可居住房间数) {
						uni.showToast({
							title: '请填写可居住房间数',
							icon: 'none'
						})
						return
					}
					if (this.params.房屋类型 === 2 && !this.params.出租房参数.平均房屋面积) {
						uni.showToast({
							title: '请填写人均房屋面积',
							icon: 'none'
						})
						return
					}
					res.证件类型 = this.params.证件类型
					if (typeof res.房屋类型 !== 'number') {
						res.房屋类型 = this.roomTypeObj[res.房屋类型]
					}

					// res.房屋类型 = this.roomTypeObj[res.房屋类型]
					this.params.出租房参数.可居住房间数 = this.params.出租房参数.可居住房间数 && parseFloat(this.params.出租房参数.可居住房间数)
					this.params.出租房参数.平均房屋面积 = this.params.出租房参数.平均房屋面积 && parseFloat(this.params.出租房参数.平均房屋面积)
					// console.log('表单数据信息：', res);
					// console.log(Object.assign({}, this.params, res))
					res.房屋面积 = res.房屋面积 && parseFloat(res.房屋面积)
					this.editRoom(Object.assign({}, this.params, res))
					// this.addRoom(Object.assign({}, this.params, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			editRoom(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/room/update', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.showToast({
							title: '修改成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}

	.color {
		color: #808080;
	}
</style>
